<template lang="pug">
AutoComplete(
v-model='keyword' @on-search='search'
clearable icon='ios-search' placeholder='搜索 API' style='width:300px')
    div(style='height: 300px;overflow-y: scroll;')
        Option(v-for="e in entities" :value="e.name" :key="e.id")
            <!--AutoComplete 无法通过搜索 name 而拿到 id，故自定义点击事件-->
            div(@click="select(e.id,e.tag)")
                MethodTag(:method="e.method")
                span {{ e.name }}<br>
                span(style="color: #a6a9aa") {{ e.path }}
</template>
<script>
import Fuse from 'fuse.js';
import $ from '@/utils/$';
import MethodTag from '@/components/MethodTag';

export default {
    name: 'SearchInput',
    components: { MethodTag },
    data() {
        return {
            keyword: '',
            entities: []
        };
    },
    methods: {
        search(keyword) {
            this.entities = $.slice(fuse.search(keyword), 0, 20);
        },
        select(entityId, entityTag) {
            this.$router.push(`/entity/${entityId}`);
            this.$root.activeMenu = { submenu: [entityTag], menuItem: entityId };
        }
    },
    watch: {
        '$root.currentSwaggerJson.collection': function(val) {
            content = $.flatMap(val);
            fuse = new Fuse(content, options);
        }
    },
    created() {
        content = $.flatMap(this.$root.currentSwaggerJson.collection);
    }
};
let content = [];
const options = {
    keys: [
        { name: 'name', weight: 0.3 },
        { name: 'namePinyin', weight: 0.3 },
        { name: 'tag', weight: 0.1 },
        { name: 'tagPinyin', weight: 0.2 },
        { name: 'path', weight: 0.1 }
    ]
};
let fuse = new Fuse(content, options);
</script>
